<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东秒杀</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .tu{
            position:relative;
        }
        .zi{
            position:absolute;
            top:0;
            left: 20px;
            text-align: center;
            color: #ffffff;
        }
        .zi h1{
            color: #fff;
            margin-top: 30px;
        }
        .zi p{
            margin-top: 90px;
            font-size: 15px;
        }
        .zi p b{
            font-size: 18px;
            margin-top: 10px;
        }
        .zi span{
            width: 30px;
            height: 30px;
            background: #000;
            display: inline-block;
            text-align: center;
            line-height:30px;
            font-weight:bold;
            font-size: 20px;
            margin: 10px 10px 10px 5px;
        }

    </style>
</head>
<body>
    <header>
        <div class="tu">
            <img src="4a15d8883775742e3efbb850ae14def7.png">
            <div class="zi">
                <h1>京东秒杀</h1>
                <p><b>20:00</b> 点场 倒计时</p>
                <span class="span1"></span>:
                <span class="span2"></span>:
                <span class="span3"></span>
            </div>
        </div>

    </header>

<script>
    var span1=document.querySelector(".span1");
    var span2=document.querySelector(".span2");
    var span3=document.querySelector(".span3");

    function seckill(){
        var shj=new Date();
        var haom=shj.getTime();

        var shj2=new Date("2019-09-05 20:00:00");
        var haom2=shj2.getTime();

        var cha=haom2-haom;

        if (cha>=0){
            var h=Math.floor(cha/1000/60/60%24);
            var m=Math.floor(cha/1000/60%60);
            var s=Math.floor(cha/1000%60);
            if (h<10){
                h="0"+h;
            }
            if (m<10){
                m="0"+m;
            }
            if (s<10){
                s="0"+s;
            }
        }else {
            var h="0"+"0";
            var m="0"+"0";
            var s="0"+"0";
        }
        span1.innerHTML=h;
        span2.innerHTML=m;
        span3.innerHTML=s;
    };
//    预先执行一遍
    seckill();
    setInterval(function (){
        seckill();
    },1000);

</script>
</body>
</html>